import $ from 'jQuery';
(function () {
    let echartsData = JSON.parse(IOT.getSessionStore(URI.REPORT.HISTORY_TIME.INFO_CHAR.PAGE));
    let $vue = new Vue({
        el: '.history-time-char-hook',
        data: {
            roleList:[{id: 1, name: '部分收货'}, {id: 2, name: '全部收货'},{id: 3, name: '订单取消'}],
            account:{
                'palletCirculation':'',//流转状态
                'palletNonCirculation':'',//非流转状态
            },
            companyId:'',
            companyList: []
        },
        methods: {
            searchForm:function(){
                var $form = $('.form-search-hook');
                var formParams = $form.serializeJson();
                IOT.getServerData(URI.REPORT.HISTORY_TIME.INFO_CHAR.CHAR,formParams , (ret) => {
                    if (ret.code === 200) {
                        this.account = $.extend({}, this.account, ret.data);
                        this.drawLine();
                    } else {
                        IOT.tips(ret.message || '服务器请求失败，稍后再试！', 'error');
                    }
                });
            },
            changeReport:function () {
                M.Page.emitPrePage();
            },
            // 触发刷新页(当前显示的页面)
            refreshPage: function () {
                M.Page.refreshPage(this.boxs);
            },
            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('myChart'));
                // 绘制图表
                var h=90;
                myChart.setOption({
                    title: {
                        text: '开灯时间',
                        subtext:'   ',
                        x : 'center',
                        y : 'top',

                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['实际开灯','标准开灯','实际关灯','标准关灯'],
                        y:140,
                    },
                    dataZoom: {
                        show: true,
                        realtime: true,
                        start: 0,
                        end: h,
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '6%',
                        y:180,
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['5月1日','5月2日','5月3日','5月4日','5月5日','5月6日','5月7日']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name:'实际开灯',
                            type:'line',
                            stack: '总量',
                            data:[120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name:'标准开灯',
                            type:'line',
                            stack: '总量',
                            data:[220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                            name:'实际关灯',
                            type:'line',
                            stack: '总量',
                            data:[150, 232, 201, 154, 190, 330, 410]
                        },
                        {
                            name:'标准关灯',
                            type:'line',
                            stack: '总量',
                            data:[320, 332, 301, 334, 390, 330, 320]
                        },
                    ]
                });
                window.onresize = myChart.resize;
            }
        },
        created: function () {
            IOT.getServerData(URI.REPORT.HISTORY_TIME.INFO_CHAR.CHAR, {}, (ret) => {
                if (ret.code === 200) {
                    this.account = $.extend({}, this.account, ret.data);
                    this.drawLine();
                } else {
                    IOT.tips(ret.message || '服务器请求失败，稍后再试！', 'error');
                }
            });
        },
        mounted: function () {
            this.drawLine();
            this.$nextTick(() => {
            });
        }
    });
})();